<!--  -->
<template>
  <div>
    <div class="Face">
      <div class="imgBox">
        <span>左手：</span>
        <el-tooltip effect="dark" content="请点击上传" placement="top-start">
          <div style="width: 300px">
            <el-upload
              ref="leftUploadRef"
              :file-list="leftImageList"
              :auto-upload="false"
              multiple
              action=""
              accept=".jp2"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-change="addLeftFile"
              :show-file-list="false"
            >
              <el-button style="margin:10px 0 " type="primary">添加</el-button>
              <!-- <el-icon><Plus /></el-icon> -->
              <!-- 查看图片 -->
            </el-upload>
          </div>
        </el-tooltip>
        <div class="image-wrap">
          <div class="image-wrap">
            <el-table
              :data="leftImageList"
              border
              fit
              highlight-current-row
            >
              <el-table-column align="center" label="掌静脉图片(点击查看)">
                <template slot-scope="scope">
                  <el-button @click="handlePictureCardPreview(scope.row)">{{ scope.row.filename }}</el-button>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                class-name="status-col"
                label="状态"
                prop="sTime"
              >
                <template slot-scope="scope">{{ loadCompletedObj[scope.row.loadCompleted] }}</template>
              </el-table-column>
              <el-table-column
                align="center"
                class-name="status-col"
                label="操作"
                width="120"
              >
                <template slot-scope="{ row, $index }">
                  <el-button
                    slot="reference"
                    size="mini"
                    class="light_red_btn"
                    @click="handleRemove(row)"
                  >删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

          </div>

        </div>
      </div>
      <div class="imgBox">
        <span>右手：</span>
        <el-tooltip effect="dark" content="请点击上传" placement="top-start">
          <div style="width: 300px">
            <el-upload
              ref="rightUploadRef"
              :file-list="rightImageList"
              :auto-upload="false"
              multiple
              action=""
              accept=".jp2"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-change="addRightFile"
              :show-file-list="false"
            >
              <el-button style="margin:10px 0 " type="primary">添加</el-button>
            </el-upload>
          </div>
        </el-tooltip>
        <div class="image-wrap">
          <div class="image-wrap">
            <el-table
              :data="rightImageList"
              border
              fit
              highlight-current-row
            >
              <el-table-column align="center" label="掌静脉图片(点击查看)">
                <template slot-scope="scope">
                  <el-button @click="handlePictureCardPreview(scope.row)">{{ scope.row.filename }}</el-button>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                class-name="status-col"
                label="状态"
                prop="sTime"
              >
                <template slot-scope="scope">{{ loadCompletedObj[scope.row.loadCompleted] }}</template>
              </el-table-column>
              <el-table-column
                align="center"
                class-name="status-col"
                label="操作"
                width="120"
              >
                <template slot-scope="{ row, $index }">
                  <el-button
                    slot="reference"
                    size="mini"
                    class="light_red_btn"
                    @click="handleRemove(row)"
                  >删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

          </div>

        </div>

      </div>

    </div>
    <el-dialog :visible.sync="dialogVisible" :destroy-on-close="true">
      <div class="jp2-img2">
        <img :src="detailsItem" data-display-polyfill-info="true"/>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  delPersonFaceApi,
  fileUploadApi,
  getEventIdentity,
  uploadPersonFace,
} from "@/api/community/person";

export default {
  props: {
    personId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      loadCompletedObj: {
        '-1': `已发送到设备，设备回复:失败`,
        '0': '已发送到设备，设备回复:等待',
        '1': '已发送到设备，设备回复:成功',
        '2': '已发送到设备，设备回复:正在删除'
      },
      leftUploadRef: "",
      rightUploadRef: "",
      leftImageList: [], //左手0
      rightImageList: [], //右手1
      imageUrl: "",
      form: {
        idCardFrontFile: "",
      },
      dialogVisible: false,
      dialogImageUrl: "",
      detailsItem: {},
    };
  },
  methods: {
    getPersonPalmVein() {
      this.$refs.leftUploadRef.clearFiles();
      this.$refs.rightUploadRef.clearFiles();
      this.leftImageList = [];
      this.rightImageList = [];
      this.imageUrl = [];
      let query_l = {
        personId: this.personId,
        type: "plamVeinLeft",
      };
      let query_r = {
        personId: this.personId,
        type: "plamVeinRight",
      };

      getEventIdentity(query_l).then((res) => {
        let list = res;
        this.leftImageList = []
        list.forEach((item) => {
          item.url = item.identityData;
          item.name = item.filename;
        });
        list.map((item) => {
          this.leftImageList.push(item);
        });
      });
      getEventIdentity(query_r).then((res) => {
        this.rightImageList = []
        let list = res;
        list.forEach((item) => {
          item.url = item.identityData;
          item.name = item.filename;
        });
        list.map((item) => {
          this.rightImageList.push(item);
        });
        // console.log(leftImageList.value);
      });
    },

    handleRemove(file) {
      console.log(file.identityID);
      let params = {
        // idList: [file.palmarVeinId],
        identityID: file.identityID,
      };
      delPersonFaceApi(params).then((res) => {
        if (res) {
          this.$message.success("删除成功");
          this.getPersonPalmVein();
        }
      });
    },
    // 左手
    addLeftFile(rawFile) {
      const params = new FormData();
      // params.append("personId", this.personId);
      params.append("fileData", rawFile.raw);
      params.append("fileType", 3);
      // params.append("identitySubType", 1);

      if (rawFile.size / 1024 / 1024 > 1) {
        this.msgError("最大不超过1m!");
        this.getPersonPalmVein();
        return false;
      } else {
        // this.addPersonPalmVein(params);
        fileUploadApi(params).then((res) => {
          // console.log(res);
          let path = "";
          if (res) {
            // this.getPersonFace();
            path = res.path;
            let data = {
              effectiveStartTime: "2023-02-28 09:11:26",
              identificationTimes: 0,
              identityData: path,
              identitySubType: 1,
              identityType: 2,
              personIDType: 1,
              personId: this.personId,
              registrationTime: "",
              reserve: "",
              validEndTime: "2026-02-28 23:59:59",
            };

            uploadPersonFace(data).then((res) => {
              // console.log(res,'xxxx');
              this.getPersonPalmVein()
              this.$message.success("上传成功");
            });
          }
        });
      }
    },
    // 右手
    addRightFile(rawFile) {
      const params = new FormData();
      // params.append("personId", this.personId);
      params.append("fileData", rawFile.raw);
      params.append("fileType", 3);
      if (rawFile.size / 1024 / 1024 > 1) {
        this.msgError("最大不超过1m!");
        this.getPersonPalmVein();
        return false;
      } else {
        // this.addPersonPalmVein(params);
        fileUploadApi(params).then((res) => {
          let path = "";
          if (res) {
            // this.getPersonFace();
            path = res.path;
            let data = {
              effectiveStartTime: "2023-02-28 09:11:26",
              identificationTimes: 0,
              identityData: path,
              identitySubType: 2,
              identityType: 2,
              personIDType: 1,
              personId: this.personId,
              registrationTime: "",
              reserve: "",
              validEndTime: "2026-02-28 23:59:59",
            };
            uploadPersonFace(data).then((res) => {
              this.getPersonPalmVein()
              console.log(res);
              this.$message.success("上传成功");
            });
          }
        });
      }
    },

    // 打开弹框
    handlePictureCardPreview(uploadFile) {
      console.log('uploadFile', uploadFile.url)
      this.dialogImageUrl = uploadFile.url;
      this.dialogVisible = true;
      // jp2
      this.$forceUpdate();
      this.detailsItem = process.env.VUE_APP_BASE_URL + uploadFile.url;
      console.log("this.detailsItem-plainvein", this.detailsItem);
      this.$nextTick(() => {
        this.asyncJp2();
      });
    },
    asyncJp2() {
      const s = document.createElement("script");
      s.type = "text/JavaScript";
      s.setAttribute("data-callType", "callScript");
      s.src = `${process.env.VUE_APP_BASE_URL}/html/jp2-polyfill.js`;
      // s.src = `http://192.168.30.65:92/html/jp2-polyfill.js`;
      // s.src = "/src/utils/html/jp2-polyfill.js";
      // console.log('s.src',s.src);
      document.head.appendChild(s);
    },
  },
  mounted() {
    this.getPersonPalmVein();
  },
};
</script>

<style lang="scss">
.Face {
  display: flex;

  .imgBox {
    width: 50%;
    padding: 10px;
  }
}
</style>


